<template>
	<div id="help-detail">
		<sub-page-header :title="name"></sub-page-header>
		<ol class="help-detail">
			<li v-for="(help, index) in helps" class="help" :key="help.id">
				<h4>{{index+1}}. {{help.title}}</h4>
				<div class="content" v-html="help.content">
					
				</div>
			</li>
		</ol>
		<div class="bottom-margin"></div>
	</div>
</template>

<script>
import SubPageHeader from '~/components/SubPageHeader.vue';
import api from '~/api/api.js';

export default {
	components: {
		SubPageHeader
	},
	data () {
		return {
			name: '',
			helps: []
		}
	},
	created () {
		var vue = this;
		var type = this.$route.params.type;
		vue.name = this.$route.params.name;
		api.get('/help/detail/'+type)
		.then(function (response) {
			vue.helps = response.data;
		})
	}
}
</script>

<style scoped>
	ol {
		list-style: none;
	}
	.help-detail {
		padding-left: 15px;
		padding-right: 15px; 
	}
	.help-detail li {
		margin-bottom: 10px;
	}

	.help-detail li h4 {
		padding-bottom: 10px;
	}
</style>